<template>
    <div class="jfys">
        <div class="jftop">
            <van-icon name="arrow-left" class="bbss" @click="jfdj" />
            <img src="//static.asus.com.cn/static/wap/images/exchange/image_topic_change.png" alt="">
        </div>
        <div class="jfbj">
            <img src="https://static.asus.com.cn/static/wap/images/others/exstore_default.jpg" alt="">
        </div>
        <div class="jfdd">
            <div class="ccc"><img src="//static.asus.com.cn/static/wap/images/exchange/icon_integral_1.png" alt=""><span>积分攻略</span></div>
            <div class="ccc"><img src="//static.asus.com.cn/static/wap/images/exchange/icon_integral_2.png" alt=""><span>兑换订单</span></div>
        </div>
        <div>
            <div v-for="(v,index) in arrs" :key="index" class="jfs">
                <div class="jfimg">
                    <img :src="v.lb1" alt="">
                </div>
                <div>
                    <p class="jfp jfp1">{{ v.p1 }}</p>
                    <p class="jfp jfp2">{{ v.p2 }}</p>
                    <p><span class="jfsp1">{{ v.p3 }}积分 + {{ v.p4 }}元</span><span class="jfsp2">{{ v.p5 }}</span></p> 
                    <div class="duihuans" @click="duihuan(index)">去兑换</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            arrs:""
        }
    },
    methods:{
        duihuan(index){
            this.$router.push({ path: '/jifenxiangxi', query: { id: this.arrs[index] }}).catch(err=>err)
        },
        jfdj(){
            this.$router.push("/yonghu").catch(err=>err)
        }
    },
    beforeCreate(){
        this.$http({
            url:"http://localhost:3000/jifen",
            method:"get"
        }).then(res=>{
            this.arrs = res.data;
        })  
    }
}
</script>

<style scoped>
.duihuans{
    width: 20vw;
    height: 8vw;
    color: #ffffff;
    background-color: #E1AB66;
    border-radius: 50px;
    text-align: center;
    line-height: 8vw;
    margin: 2vw 0 0 35vw;
}
.jfsp2{
    font-size: 2vw;
    opacity: 0.5;
    text-decoration: line-through;
    margin-left: 2vw;
    
}
.jfsp1{
    font-size: 4.5vw;
    color: #E74C3C;
}
.jfp1{
    font-size: 4vw;
    margin-top: 2vw;
}
.jfp2{
    font-size: 3vw;
    opacity: 0.5;
    /* margin-top: 2vw; */
}
.jfys{
    background-color: #f7f7f7;
}
.jfp{
    width: 60vw;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    

}
.jfs{
    display: flex;
    width: 94vw;
    height: 35vw;
    background-color: #fff;
    margin: 2vw 0 2vw 3vw;
    border-radius: 10px;
}
.jfimg img{
    width: 24vw;
    margin: 6vw 5vw 3vw 3vw;
}

.ccc{
    display: flex;
    margin-left: 16vw;
    padding-top:5vw ;
    opacity: 0.5;
}
.jfdd{
    width: 100vw;
    height: 18vw;
    display: flex;
    margin-top: 16vw;
}
.jfdd img{
    width: 7vw;
    height: 7vw;
    margin: 0 1vw 0 0;
}
.jfbj{
    width: 100vw;
    height: 33vw;
    background-color: #FFF6D8;
    position: relative;
}

.jfbj img{
    width: 94vw;
    border-radius: 10px;
    position: absolute;
    top: 17vw;
    left: 3vw;
}
.jftop{
    width: 100vw;
    height: 13vw;
    background-color: #FFF6D8;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
.jftop img{
    width: 25vw;
    height: 5vw;
    margin: 5vw 0 0 15vw;
}
.bbss{
    width: 20vw;
    height: 8vw;
    font-size: 6vw;
    padding: 5vw 0 0 4vw;
    opacity: 0.3;
}

</style>